<template>
    <div class="mall_release">
        <el-form label-position="top" :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item :label="$t('mall.商品名称')" prop="name">
                <el-input v-model="ruleForm.name" :placeholder="$t('mall.请输入商品名称')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('mall.选择买卖')">
                <div class="tabs_list">
                    <div class="item" :class="ruleForm.type == 'buy' ? 'active' : ''" @click="ruleForm.type = 'buy'">
                        {{ $t('mall.买') }}</div>
                    <div class="item" :class="ruleForm.type == 'sell' ? 'active' : ''" @click="ruleForm.type = 'sell'">
                        {{ $t('mall.卖') }}</div>
                </div>
            </el-form-item>
            <el-form-item :label="$t('mall.价格')" prop="price">
                <el-input v-model="ruleForm.price" :placeholder="$t('mall.请输入价格')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('mall.商品数量')" prop="stock">
                <el-input type="number" v-model="ruleForm.stock" :placeholder="$t('mall.请输入商品数量')"></el-input>
            </el-form-item>

            <el-form-item :label="$t('mall.添加商品照片')" prop="images">
                <div class="mall_upload">
                    <el-upload class="avatar-uploader" :action="upload_url" :file-list="fileList" :limit="limit"
                        list-type="picture-card" multiple accept=".jpg,.jpeg,.png,.gif,.bmp,.webp"
                        :on-success="uploadSuccess" :on-remove="removeImage" :before-upload="uploadBefore"
                        :on-exceed="exceedImage">
                        <img src="@/assets/image/upload.png" class="mall_img">
                    </el-upload>
                </div>
            </el-form-item>
        </el-form>

        <div class="mall_release_footer">
            <el-button type="primary" @click="submit">{{ $t('mall.立即发布') }}</el-button>
            <el-button type="primary" plain @click="$emit('close')">取消</el-button>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        const imageValidator = (rule, value, callback) => {
            if (!value.length) {
                callback(new Error(`${this.$t('mall.添加商品照片')}`));
            } else {
                callback();
            }
        };
        return {
            upload_url: window.BASE_URL + 'common/upload',
            fileList: [],
            uploadedImages: [],
            limit: 2,


            ruleForm: {
                name: '',
                price: '',
                stock: '',
                type: "buy",
                images: []
            },
            rules: {
                name: [
                    { required: true, message: this.$t('mall.请输入商品名称'), trigger: 'blur' }
                ],
                price: [
                    { required: true, message: this.$t('mall.请输入价格'), trigger: 'blur' }
                ],
                stock: [
                    { required: true, message: this.$t('mall.请输入商品数量'), trigger: 'blur' }
                ],
                images: [
                    { validator: imageValidator, trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        submit() {
            this.uploadedImages.forEach(img => {
                this.ruleForm.images.push(img.response.data.fullurl);
            });
            let images = this.ruleForm.images;
            images = images.length ? images.join(',') : "";
            this.ruleForm.images = images;
            this.$refs["ruleForm"].validate(async (valid) => {
                if (!valid) return false;

                await this.$api.shopApi.publish(this.ruleForm);
                this.$message({
                    message: this.$t('mall.发布成功'),
                    type: 'success'
                });
                this.$emit("ok")
            });
        },

        uploadSuccess(response, file, fileList) {
            this.uploadedImages.push({
                uid: file.uid,
                name: file.name,
                url: URL.createObjectURL(file.raw),
                response
            });
        },
        removeImage(file, fileList) {
            const index = this.uploadedImages.findIndex(img => img.uid === file.uid);
            if (index !== -1) this.uploadedImages.splice(index, 1);
        },
        exceedImage() {
            let msg = `${this.$t('mall.最多可上传')}:${this.limit}`
            this.$message.error(msg);
        },
        uploadBefore(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error(`${this.$t('最大')}2MB!`);
            }
            return isLt2M;
        }
    }
}
</script>

<style lang="scss" scoped>
.mall_release {
    &:deep(.el-form-item) {
        margin-bottom: 8px;

        .el-form-item__label {
            font-size: 14px;
            color: #333333;
        }

        .el-input__inner {
            height: 52px;
            background: #F5F5F5;
        }
    }

    .mall_upload {
        width: 100%;
        display: flex;

        .mall_img {
            width: 78px;
            height: 78px;
            border-radius: 4px 4px 4px 4px;
        }

        &:deep(.el-upload--picture-card) {
            width: 80px;
            height: 80px;
            border-radius: 4px 4px 4px 4px;
        }

        &:deep(.el-upload-list--picture-card) {
            .el-upload-list__item {
                width: 80px;
                height: 80px;
                border-radius: 4px 4px 4px 4px;
            }
        }
    }

    .tabs_list {
        width: 100%;
        display: flex;

        .item {
            width: 64px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            font-size: 16px;
            color: #7F7F7F;
            margin-right: 16px;
            background: #F3F5F7;
            border-radius: 8px 8px 8px 8px;
            cursor: default;

            &.active {
                color: #FFFFFF;
                background: linear-gradient(270deg, #4488FF 0%, #2BBCFF 100%);
            }
        }
    }

    .mall_release_footer {
        display: flex;
        justify-content: center;

        .el-button {
            width: 118px;
            height: 32px;
        }
    }
}
</style>